<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>Home page</title>
    <script type="text/javascript" src="/voteup/resources/js/jquery-1.6.1.js"></script>
    <script type="text/javascript" src="/voteup/resources/js/stylescript.js"></script>
    <script type="text/javascript" charset="utf-8">
        $(document).ready(function() {
            $("#btn-slide-group").click(function() {
                $("#groupmatepanel").slideToggle("slow");
                $(this).toggleClass("active");
                return false;
            });
            $("#btn-slide-friend").click(function() {
                $("#friendpanel").slideToggle("slow");
                $(this).toggleClass("active");
                return false;
            });
        });
    </script>
</head>
<body>
<c:import url="/WEB-INF/jsp/header.jsp"/>
<c:import url="/WEB-INF/jsp/menu.jsp"/>
<center>

    <c:if test="${not empty msg}">
        <p class="error">${msg}</p>
    </c:if>
    <p>

    <h3>Welcome to home page, ${person.firstName}</h3></p>
    <table class="personavatarinfotable" border="0" cellspacing="5" cellpadding="">
        <tr>
            <td align=center>
                <img src="/voteup/resources/img/avatars/${person.avatar}.jpg" alt="" width="120" height="160"
                     border="0">

                <p class="rate">${person.rating}</p>
                <a href="/voteup/goedit">Edit profile</a>
            </td>
            <td>
                <table class="persontable" cellspacing="0" cellpadding="0">
                    <tr>
                        <td><p>Name: ${person.lastName} ${person.firstName} ${person.middleName}</p></td>
                    </tr>
                    <tr>
                        <td><p>Bitrhday: ${person.bday}-${person.bmonth}-${person.byear}</p></td>
                    </tr>
                    <tr>
                        <td><p>Student of: <a
                                href="/voteup/universities/${person.group.faculty.university.universityId}">${person.group.faculty.university.universityName}</a>
                        </p></td>
                    </tr>
                    <tr>
                        <td><p>Faculty: <a
                                href="/voteup/faculties/${person.group.faculty.facultyId}">${person.group.faculty.facultyName}</a>
                        </p></td>
                    </tr>
                    <tr>
                        <td><p>Group: <a href="/voteup/groups/${person.group.groupId}">${person.group.groupName}</a></p>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>


    <div id="groupmatepanel">
        <p>Top students of <a href="/voteup/groups/${person.group.groupId}">${person.group.groupName}:</a></p>
        <table class="friendlist" cellspacing="4" cellpadding="3">
            <tr>
                <c:forEach begin="0" end="4" step="1" items="${groupmates}" var="mate">
                    <td width="75">
                        <table cellpadding="0" cellspacing="5" border="0">
                            <tr>
                                <a href="/voteup/persons/${mate.personId}">
                                    <p align="center"><img src="/voteup/resources/img/avatars/${mate.avatar}.jpg" alt=""
                                                           width="30"
                                                           height="40"
                                                           border="0"></p>
                                </a>
                            </tr>
                            <tr>
                                <a href="/voteup/persons/${mate.personId}">
                                    <p align="center">${mate.firstName}<br>
                                            ${mate.lastName}</p>
                                </a>
                            </tr>
                        </table>
                    </td>
                </c:forEach>
            </tr>
        </table>
    </div>

    <p class="slide"><a href="/voteup/#" class="btn-slide" id="btn-slide-group">Top of ${person.group.groupName}</a></p>

    <c:if test="${not empty friends}">
        <div id="friendpanel">
            <p>Your <a href="/voteup/persons">friends:</a></p>
            <table class="friendlist" cellspacing="4" cellpadding="3">
                <tr>
                    <c:forEach begin="0" end="4" step="1" items="${friends}" var="friend">
                        <td width="75">
                            <table cellpadding="0" cellspacing="5" border="0">
                                <tr>
                                    <a href="/voteup/persons/${friend.personId}">
                                        <p align="center"><img src="/voteup/resources/img/avatars/${friend.avatar}.jpg"
                                                               alt=""
                                                               width="30"
                                                               height="40"
                                                               border="0"></p>
                                    </a>
                                </tr>
                                <tr>
                                    <a href="/voteup/persons/${friend.personId}">
                                        <p align="center">${friend.firstName}<br>
                                                ${friend.lastName}</p>
                                    </a>
                                </tr>
                            </table>
                        </td>
                    </c:forEach>
                </tr>
            </table>
        </div>
        <p class="slide"><a href="/voteup/#" class="btn-slide" id="btn-slide-friend">Top friends</a></p>
    </c:if>

</center>
</body>
</html>